<!--  -->
<template>
  <div v-if="model">
    <navBar></navBar>
    <div class="detailinfo">
      <div class="video">
        <video controls="controls" :src="model.content"></video>
      </div>
      <div class="detailinfoText">
        <div class="one">
          <span>{{ model.category.title }}</span>
          <span>{{ model.name }}</span>
        </div>

        <div class="two">
          <span>{{ model.userinfo.name }}</span>
          <span>148.6万次观看</span>
          <span>5281弹幕</span>
          <span>{{ model.date }}</span>
        </div>
        <div class="three">
          <p
            @click="collectionClick"
            :class="{ activeColor: collectionActive }"
          >
            <span class="icon-star-full"></span>
            <span>收藏</span>
          </p>
          <p>
            <span class="icon-box-add"></span>
            <span>缓存</span>
          </p>
          <p>
            <span class="icon-redo2"></span>
            <span>分享</span>
          </p>
          <p
            @click="subscriptClick"
            :class="{ activeColor: subscritionActive }"
          >
            <span style="font-size=10px">+</span>
            <span>关注</span>
          </p>
        </div>
      </div>
      <div class="detailparent">
        <Cover
          class="detailitem"
          v-for="(item, index) in commendList"
          :key="index"
          :detailitem="item"
        />
      </div>
    </div>
    <commentTitle
      :dataLength="lens"
      @Postcomment="postSuccess"
      ref="commentIpt"
    />
    <comment
      @lengthselect="(len) => (lens = len)"
      ref="commentPulish"
      @publishClick="postChildClick"
    />
  </div>
</template>

<script>
name: "Article";
import navBar from "@/components/navBar";
import Cover from "@/views/Cover";
import commentTitle from "@/components/commentTitle";
import comment from "@/components/comment";
export default {
  components: {
    navBar,
    Cover,
    commentTitle,
    comment,
  },
  data() {
    return {
      model: null,
      commendList: null,
      lens: null,
      collectionActive: null,
      subscritionActive: null,
      isFollowed: false,
      Postcom: {
        comment_content: "",
        comment_date: "",
        parent_id: null,
        article_id: null,
      },
    };
  },
  methods: {
    //获取文章信息
    async articleitemData() {
      const res = await this.$http.get("/article/" + this.$route.params.id);
      this.model = res.data[0];
      if(this.model){
          this.subscritionInit()
      }
    },
    //获取推荐文章
    async commandData() {
      const res = await this.$http.get("/commend");
      this.commendList = res.data;
    },
    //发送评论
    async postSuccess(res) {
      const date = new Date();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      if (m < 10) {
        m = "0" + m;
      }
      if (d < 10) {
        d = "0" + d;
      }
      let str = `${m}-${d}`;
      this.Postcom.comment_content = res;
      this.Postcom.comment_date = str;
      this.Postcom.article_id = this.$route.params.id;
      const result = await this.$http.post(
        "/comment_post/" + localStorage.getItem("id"),
        this.Postcom
      );
      this.$refs.commentPulish.commentData();
      this.Postcom.parent_id = null;
      if (result.status == 200) {
        this.$msg.fail("评论发表成功");
      }
    },
    postChildClick(id) {
      this.Postcom.parent_id = id;
      this.$refs.commentIpt.focusIpt();
    },

    //收藏文章
    async collectionClick() {
      if (localStorage.getItem("token")) {
        const res = await this.$http.post(
          "/collection/" + localStorage.getItem("id"),
          { article_id: this.$route.params.id }
        );
        if (res.data.msg == "收藏成功") {
          this.collectionActive = true;
        } else {
          this.collectionActive = false;
        }
        this.$msg.fail(res.data.msg);
      }
    },
    //点击关注发帖用户
    async subscriptClick() {
      if (localStorage.getItem("token")) {
        const res = await this.$http.post(
          "/sub_scription/" + localStorage.getItem("id"),
          { sub_id: this.model.userid }
        );
        if (res.data.msg == "关注成功") {
          this.subscritionActive = true;
        } else {
          this.subscritionActive = false;
        }
        this.$msg.fail(res.data.msg);
      }
    },
    //进入页面获取是否收藏
    async collectionInit() {
      if (localStorage.getItem("token")) {
        const res = await this.$http.get(
          "/collection/" + localStorage.getItem("id"),
          {
            params: {
              article_id: this.$route.params.id,
            },
          }
        );
        this.collectionActive = res.data.success;
      }
    },
    //进入页面获取是否关注
    async subscritionInit() {
      if (localStorage.getItem("token")) {
        const res = await this.$http.get(
          "/sub_scription/" + localStorage.getItem("id"),
          {
            params: {
              sub_id: this.model.userid,
            },
          }
        );
        this.subscritionActive = res.data.success;
      }
    },
  },

  mounted() {
    this.articleitemData();
    this.commandData();
    this.collectionInit();
  },
  watch: {
    $route() {
      this.articleitemData();
      this.commandData();
      this.collectionInit();
    },
  },
};
</script>
<style>
.detailinfo {
  background-color: white;
}
.video {
  width: 100%;
}
.detailinfo .video video {
  width: 100%;
}
.detailinfoText {
  padding: 4.167vw;
}
.detailinfoText .one span:nth-child(1) {
  padding: 0 2.778vw;
  color: #fb7299;
  background-color: #f4f4f4;
  border-radius: 2.778vw;
}
.detailinfoText .two {
  padding: 3.778vw 2.778vw;
}
.detailinfoText .two span {
  color: #aaa;
  font-size: 3.333vw;
  margin-right: 2.778vw;
}
.detailinfoText .two span:nth-child(1) {
  color: black;
  font-size: 4vw;
  padding-right: 2.778vw;
}
.detailinfoText .three {
  padding: 0 2.778vw;
  display: flex;
}
.detailinfoText .three p {
  margin-right: 4.167vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #757575;
}
.detailinfoText .three p span:nth-child(1) {
  font-size: 5.833vw;
  padding-right: 0.833vw;
}
.detailinfoText .three p span:nth-child(2) {
  font-size: 3.611vw;
}
.detailparent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.detailparent .detailitem {
  margin: 1.389vw 0;
  width: 45%;
}
.detailinfoText .three .activeColor {
  color: #fb7299;
}
</style>